<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Data visualization</title>

    <link rel="stylesheet" href="css/index.css">
    <style>
        a:hover {
            color: rgb(191, 251, 253);
            background: transparent;
            border-color: #bbb#fff#fff#aaa;
        }

        /*鼠标经过超链接的样式*/



        a:active {
            color: rgb(64, 108, 183);
            text-decoration: none;
        }
    </style>
</head>

<body>
    <header>
        <h1>展示学生信息</h1>
        <div class ><a href="#" class="access" >  进入分析
            </a></div>

        <div class="showTime">1</div>
        <script>
            var t = null;
            t = setTimeout(time, 1000); //开始运行
            function time() {
                clearTimeout(t); //清除定时器
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours(); //获取时
                var m = dt.getMinutes(); //获取分
                var s = dt.getSeconds(); //获取秒
                document.querySelector(".showTime").innerHTML =
                    "当前时间：" +
                    y +
                    "年" +
                    mt +
                    "月" +
                    day +
                    "日-" +
                    h +
                    "时" +
                    m +
                    "分" +
                    s +
                    "秒";
                t = setTimeout(time, 1000); //设定定时器，循环运行
            }
        </script>
    </header>

    <section class="mainbox">


        <div class="column">
            <div class="panel pie2" style="height: 550px;">
                
                <div class="chart" style="height: 550px;">

                    <div id="getAllClassGenderEchart" style="width: 100%;height:540px;"></div>
                </div>
                <div class="panel-footer"></div>
            </div>

            <div class="map">
           
                <div class="panel pie3" style="height: 550px;">
                    <h2 style="height: 50px;"></h2>
                    <div class="chart" style="height: 500px;"></div>
                    <div class="panel-footer"></div>
                </div>
                
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart">
                    
                    <div id="getGenderConunt" style="width: 100%;height:540px;"></div>
                </div>

            </div>
        </div>
        <div class="column">
            <div class="panel pie2" style="height: 550px;">
                
                <div class="chart" style="height: 550px;">
                    
                    <div id="getSemesterGender" style="width: 100%;height:540px;"></div>
                </div>
                <div class="panel-footer"></div>
            </div>

            <div class="map">
                <div class="panel pie3" style="height: 550px;">
                    <h2 style="height: 50px;"></h2>
                    <div class="chart" style="height: 500px;"></div>
                    <div class="panel-footer"></div>
                </div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart">
                    
                    <div id="getStatusGender" style="width: 100%;height:540px;"></div>
                </div>

            </div>
        </div>

        <div class="column">
            <div class="panel pie2" style="height: 550px;">
             
                <div class="chart" style="height: 550px;">
                    
                    <div id="getSemesterClassGender" style="width: 100%;height:540px;"></div>
                </div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </section>
    <script src="js/jquery.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/echarts.min.js"></script>
    <!-- <script src="js/area_echarts.js"></script> -->
    <!-- <script src="js/map.js"></script> -->
    <!-- <script src="js/map/shanghai.js"></script> -->
    <!-- <script src="js/china.js"></script> -->
    <!-- <script src="js/index.js"></script> -->
    <script src="../js/request.js"></script>
    <script src="js/showechart.js"></script>
    <script>
        Get("/Gender/getGenderCount").then((data) => {
            console.log(JSON.stringify(data.data))
            getGenderConunt('getGenderConunt', data.data)
        })
        Get("/Gender/getAllClassGender").then((data) => {
            console.log(JSON.stringify(data.data))
            var classNameY = []
            var nanX1 = []
            var nvX2 = []
            data.data.forEach(element => {
                classNameY.push(element.classId + "班")
                nanX1.push(element.maleCount)
                nvX2.push(element.femaleCount)
            });
            getAllClassGender('getAllClassGenderEchart', classNameY, nanX1, nvX2)
        })
        Get("/Gender/getStatusGender").then((data) => {
            // console.log(JSON.stringify(data))
            var dataset = []
            dataset.push(['性别', '男', '女'])
            data.data.forEach(element => {
                dataset.push([element.status === 'A' ? '在校' + element.sumCount + '人' : '毕业' + element.sumCount + '人', element.maleCount, element.femaleCount])

            });
            getStatusGender('getStatusGender', dataset)
        })
        Get("/Gender/getSemesterGender").then((data) => {
            // console.log(JSON.stringify(data))
            console.log(JSON.stringify(data.data))
            var classNameY = []
            var nanX1 = []
            var nvX2 = []
            data.data.forEach(element => {
                classNameY.push("第" + element.semester + "学期")
                nanX1.push(element.maleCount)
                nvX2.push(element.femaleCount)
            });
            getSemesterGender('getSemesterGender', classNameY, nanX1, nvX2)
        })
        Get("/Gender/getSemesterClassGender").then((data) => {
            console.log(JSON.stringify(data.data))
            var classNameY = []
            var nanX1 = []
            var nvX2 = []
            data.data.forEach(element => {
                classNameY.push("第" + element.semester + "学期" + element.classId + "班" )
                nanX1.push(element.maleCount)
                nvX2.push(element.femaleCount)
            });
            getSemesterClassGender('getSemesterClassGender',classNameY,nanX1,nvX2)
        })
    </script>
</body>

</html>